<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta charset="UTF-8">
<title>黔彩便利加盟申请表</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet"
	href="${contextPath}/static/statistics/layui/css/layui.css" />
	<link rel="stylesheet" href="${contextPath}/static/jeDate-test.css">
	<link rel="stylesheet" href="${contextPath}/static/jedate.css">
</head>
<style>
		body{
			margin: 0px;
			padding: 0px;
		}
		span {
			margin: 5px 7px;
		}
          font{
          	color: red;
          	font-size: 15px;
          	vertical-align: middle;
          }
           input[type='checkbox']{
		     margin-left: 15px;
		     color:#434343;
		     vertical-align: middle;
           }
          input,select,option,textarea{
			outline:none;
		  }
	button{
		margin-left: 15px;
          	margin-right: 15px;
	}
	.span_head{
		color: #408170;
		margin-left: 22px;
		font-size: 19px;
		font-weight: bold;
	}
	.span_title{
		color: #1D1D1D;
		font-size: 16px;
		margin-left: 22px;
	}
	.div_content{
		margin-top: 10px;
		margin-bottom: 15px;
		text-align: center;
	}
	.input_content{
		border: 1px solid #DCE4EB;
		color:#434343;
		width:90%;
       	height: 33px;
       	border-radius: 4px;
       	font-size: 16px;
       	padding-left:5px;
	}
	select{
      	border-radius: 4px;
      	height: 33px;
      	border: 1px solid #DCE4EB;
      	color:#B3B3B3;
      	width:90%;
		font-size:17px;
		-webkit-appearance:none;
		background: url(${contextPath}/static/image/select.png) no-repeat;
		background-position:98% 50%;
     	padding-left:5px;
     	background-size: 16px 18px;
      }
	#nextButton{
		width: 90%;
		height: 47px;
		border-radius: 4px;
		margin-bottom: 28px;
		background-color: #408170;
		color:white;
		margin-top: 10px;
		border: none;
		outline: none;
	}
	/*弹窗CSS*/
	#warning1{
		width: 100%;
		height: 100%;
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,0.5);
	}
	#layer_content1{
		background-color: white;
		width:200px;
		height:150px;
		margin:0px auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -100px;
		margin-top: -75px;
		text-align: center;
		background-color: #FFFFFF;
		border-radius:5px;
	}
	#layer{
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	}
	#layer_content{
		background-color: white;
		width:200px;
		margin-left: 100px;
		margin-top: 100px;
		text-align: center;
		background-color: #408170;
	}
	#dibu{
		text-align: right;
		margin-bottom: 10px;
	}
	#dibu button{
		border-radius: 5px;
		outline: none;
		margin-right: 8px;
	}
</style>
			
<body>
	<div>
		<div>
			<div>
				<div style="margin-top: 30px;margin-bottom: 30px;">
					<span class="span_head">加盟投资经营意向</span>
				</div>
				<div>
				<form id="attention">
					<span class="span_title">您所了解的本行业的品牌有</span>
					<div class="div_content">
						<input type="text" class="input_content" id="knownBrands" name="knownBrands">
					</div>
					<span class="span_title">获取加盟信息</span><font >*</font>
					<div style="margin-top: 13px; margin-bottom: 18px;">
						<input type="checkbox" id="" name="getJoinInfo" value="门店广告" /><span style="color: #434343;font-size: 13px;">门店广告</span>
						<input type="checkbox" id="" name="getJoinInfo" value="微信公众号" /><span style="color: #434343;font-size: 13px;">微信公众号</span>
						<input type="checkbox" id="" name="getJoinInfo" value="门店人员" /><span style="color: #434343;font-size: 13px;">门店人员</span> 
						<br/>
						<input type="checkbox" id="" name="getJoinInfo" value="熟人推荐" /><span style="color: #434343;font-size: 13px;">熟人推荐</span> 
						<input type="checkbox" id="" name="getJoinInfo" value="加盟热线" /><span style="color: #434343;font-size: 13px;">加盟热线</span>
						<input type="checkbox" id="getJoinInfoOther" name="getJoinInfo" value="" /><span style="color: #434343;font-size: 13px;">其他</span>
						<br/>
						<div class="div_content">
						 <input type="text" id="getJoinInf" name="getJoinInf" class="input_content" style="margin-top: 13px;display:none;">
						</div>
					</div>
					<span class="span_title">您计划预算投资多少资金来运作整个项目</span><font >*</font>
					<div class="div_content">
						<select id="investMoney" name="investMoney" >
							<option value="">请选择</option>
							<option value="1">0-5万</option>
							<option value="2">5-10万</option>
							<option value="3">10-15万</option>
							<option value="4">20万以上</option>
						</select>
						<input type="text" id="validateInvestMoney" value="投资资金不能为空" class="input_content" style="display:none;color:red;"/>
					</div>
					<p style="color: #1D1D1D;font-size: 16px;margin-left: 22px;margin-right: 22px;">如果您选择加盟本公司品牌，您希望我们为您提供哪些支持与服务？</p><br/>
					<span style="color: #808080;font-size: 13px;margin-left: 22px;">1、支持</span>
					<div class="div_content">
						<input type="text" id="hopeSupport" name="hopeSupport"  class="input_content">
					</div>
					<span style="color: #808080;font-size: 13px;margin-left: 22px;">2、服务</span>
					<div class="div_content">
						<input type="text" id="hopeService" name="hopeService" class="input_content">
					</div>
					<span class="span_title">采取管理方式</span><font >*</font>
					<div style="margin-top: 13px;margin-bottom: 18px;">
						<input type="checkbox" id="" name="manageType" value="自己管理" /><span style="color: #434343;font-size: 13px;">自己管理</span>
						<input type="checkbox" id="" name="manageType" value="亲戚经营管理"  /><span style="color: #434343;font-size: 13px;">亲戚经营管理</span> 
						<br/>
						<input type="checkbox" id="" name="manageType" value="招聘经理人管理"  /><span style="color: #434343;font-size: 13px;">招聘经理人管理</span>
						<input type="checkbox" id="manageTypeOther" name="manageType" value=""  /><span style="color: #434343;font-size: 13px;">其他</span>
						<br/>
						<div class="div_content">
						 <input type="text" id="manageTyp" name="manageTyp" class="input_content" style="margin-top: 23px;display: none;">
						</div>
					</div>
					<span class="span_title">选择加盟方式</span><font >*</font>
					<div class="div_content">
						<select id="joinType" name="joinType" >
							<option value="">请选择</option>
							<option value="1">特许加盟</option>
							<option value="2">品牌加盟</option>
							<option value="3">合约加盟</option>
						</select>
						<div class="div_content">
						  <input type="text" id="validateJoinType" value="加盟方式不能为空" class="input_content" style="margin-top: 13px;display:none;color:red;">
						</div>
					</div>
					<span class="span_title">意向加盟店铺面积</span><font >*</font>
					<div class="div_content">
					  <input type="number" id="attentionShopAcreage" name="attentionShopAcreage" class="input_content">
					</div>
					<span class="span_title">意向加盟地区</span><font >*</font>
					<div class="div_content">
						<select style="width: 29%;color:#434343;" disabled="disabled" id="province" name="province">
						</select>
						<select style="width: 29%;" id="city" name="city">
						</select>
						<select style="width: 29%;" id="area" name="area">
						</select>
					</div>
					<div class="div_content">
						  <input type="text" id="validateJoinArea" value="加盟地区不能为空" class="input_content" style="display:none;color:red;">
					</div>
					<div class="div_content">
						<button id="nextButton" onclick="examApplay()" type="button">提交审核</button>						
					</div>
				</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 弹窗内容开始 -->
 	 <div id="warning1">
		<div id="layer_content1">
			<div style="margin:0 auto;width:200px;height:100px;color:#1D1D1D;
				 font-size:13px;margin-top:20%;text-align:justify;line-height:20px;">
				感谢您的申请！审批结果将在2-3个工作日上传至微信公众号,请注意查看！
			</div>
		</div>
	</div>
	<!-- 弹窗内容结束 -->
	<script src="${contextPath}/static/statistics/js/jquery.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.js"></script>
	<script src="${contextPath}/static/statistics/layui/layui.all.js"></script>
	
	<script type="text/javascript">
		$(function(){
			/* 初始化加载区域数据 */
			param = {
				zoneCode:'',
				state:1
			};
			$.ajax({
	            type: 'post',
	            url: '${contextPath}/ktJoin/getArea',
	            data:param,   
	            dataType: 'json',
	            async : false,
	            success: function (data) {
	            	var dataArray = data;
	            	console.log(dataArray);
	            	jQuery("#city").append("<option value=''>"+'请选择市'+"</option>");
	            	jQuery("#area").append("<option value=''>"+'请选择区'+"</option>");
	            	$.each(dataArray, function (i, item) {
	            		if(item.PARENT_ID == '01'){
	            			jQuery("#province").append("<option value="+item.ZONE_CODE+">"+item.ZONE_NAME+"</option>");
	            		}
	                	if(item.PARENT_ID == '0101'){
							jQuery("#city").append("<option value="+item.ZONE_CODE+">"+item.ZONE_NAME+"</option>");
						}
						if(item.PARENT_ID != '01' && item.PARENT_ID != '0101' && item.PARENT_ID != '0'){
							jQuery("#area").append("<option value="+item.ZONE_CODE+">"+item.ZONE_NAME+"</option>");
						}
	               	});
	            },
	            error: function (result) {
	              layer.closeAll('loading');
	              layer.msg("网络异常");
	            }
	        });
		})
		/* 区域级联 */
		$("#city").on('change',function(){
			param = {
				parentId:$("#city").val(),
				state:1
			};
			console.log(param);
			$("#area").empty();
			$.ajax({
	            type: 'post',
	            url: '${contextPath}/ktJoin/getArea',
	            data:param,   
	            dataType: 'json',
	            async : false,
	            success: function (data) {
	            	var dataArray = data;
	            	console.log(dataArray);
	            	$.each(dataArray, function (i, item) {
							jQuery("#area").append("<option value="+item.ZONE_CODE+">"+item.ZONE_NAME+"</option>");
	               	});
	            },
	            error: function (result) {
	              layer.closeAll('loading');
	              layer.msg("网络异常");
	            }
	        });
		})
	</script>
	<!-- 处理显示/隐藏的INPUT -->
	<script type="text/javascript"> 
	/* 其他获取加盟信息的途径 */
	$("#getJoinInfoOther").on('click',function(){
		if($('#getJoinInfoOther')[0].checked){
			$('#getJoinInf').show();
			$("#validateGetJoinInf").hide();
		}else{
			$('#getJoinInf').hide();
			$("#validateGetJoinInf").hide();
			$("#getJoinInf").val('');
		}
	});
	/* 其他加盟管理方式 */
	$("#manageTypeOther").on('click',function(){
		if($('#manageTypeOther')[0].checked == true){
			$('#manageTyp').show();
			$("#validateManageType").hide();
		}else{
			$('#manageTyp').hide();
			$("#validateManageType").hide();
			$('#manageTyp').val('');
		}
	})
	/* select下拉框改变字体颜色 */
	var investMoney = document.getElementById("investMoney");
	investMoney.onchange = function investMoney(){
		$("#investMoney").css('color','#434343');
	}
	   
	var joinType = document.getElementById("joinType");
	joinType.onchange = function joinType(){
		$("#joinType").css('color','#434343');
	}
	
	var city = document.getElementById("city");
	city.onchange = function city(){
		$("#city").css('color','#434343');
	}
	
	var area = document.getElementById("area");
	area.onchange = function area(){
		$("#area").css('color','#434343');
	}
	</script>
	<script type="text/javascript">
	function examApplay(){
		/* 表单验证开始 */
		var getJoinInfo = document.getElementsByName("getJoinInfo");
		if(getJoinInfo[5].checked){
			var getJoinInf = $("#getJoinInf").val();
			if(getJoinInf == "" || getJoinInf == null){
				$("#getJoinInf").val('获取其他加盟信息方式不能为空');
			    $("#getJoinInf").css('color','red');
			    $("#getJoinInf").css('font-size','13px');
				$("html,body").animate({scrollTop:$("#getJoinInf").offset().top},10)
				$("#getJoinInf").on('click',function(){
					$("#getJoinInf").val('');
					$("#getJoinInf").css('color','#434343');
					 $("#getJoinInf").css('font-size','16px');
				});
				return;
			}
		}
		
		
		var investMoney = $("#investMoney").val();
		if(investMoney == "" || investMoney == null){
			$("#investMoney").hide();
			$("#validateInvestMoney").show();
			$("html,body").animate({scrollTop:$("#validateInvestMoney").offset().top},10)
			$("#validateInvestMoney").on('click',function(){
				$("#investMoney").show();
				$("#validateInvestMoney").hide();
			});
			return;
		}
		
		var manageType = document.getElementsByName("manageType");
		if(manageType[3].checked){
			var manageTyp = $("#manageTyp").val();
			if(manageTyp == "" || manageTyp == null){
				$("#manageTyp").val('其他管理方式不能为空');
			    $("#manageTyp").css('color','red');
			    $("#manageTyp").css('font-size','13px');
				$("html,body").animate({scrollTop:$("#manageTyp").offset().top},10)
				$("#manageTyp").on('click',function(){
					$("#manageTyp").val('');
					$("#manageTyp").css('color','#434343');
					 $("#manageTyp").css('font-size','16px');
				});
				return;
			}
		}
		
		var joinType = $("#joinType").val();
		if(joinType == "" || joinType == null){
			$("#joinType").hide();
			$("#validateJoinType").show();
			$("html,body").animate({scrollTop:$("#validateJoinType").offset().top},10)
			$("#validateJoinType").on('click',function(){
				$("#validateJoinType").hide();
				$("#joinType").show();
			});
			return;
		}
		//验证区域
		/* var province = $("#province").val();
		var province = $("#city").val();
		var province = $("#area").val();
		if((province == "" || province == null)||(city == "" || city == null)||(area == "" || area == null)){
			$("#province").hide();
			$("#city").hide();
			$("#area").hide();
			$("#validateJoinArea").show();
			$("html,body").animate({scrollTop:$("#validateJoinArea").offset().top},10)
			$("#validateJoinArea").on('click',function(){
				$("#validateJoinArea").hide();
				$("#province").show();
				$("#city").show();
				$("#area").show();
			});
			return;
		} */
		
		/* 表单验证结束 */
		/* 获取加盟信息值  */
		getJoinInfo = document.getElementsByName("getJoinInfo");
		joinInfo = [];
	    for(k in getJoinInfo){
	        if(getJoinInfo[k].checked)
	        	joinInfo.push(getJoinInfo[k].value);
	    }
	    joinInfo = joinInfo.join(","); 
	    console.log(joinInfo);
	    var getJoinInf = $("#getJoinInf").val();
	    /* 获取管理方式的值 */
	    manageType = document.getElementsByName("manageType");
	    manageTyp = [];
	    for(k in manageType){
	        if(manageType[k].checked)
	        	manageTyp.push(manageType[k].value);
	    }
	    manageTyp = manageTyp.join(",");
	    var manageType = $("#manageTyp").val();
	    /* 获取意向加盟地区 */
		var province=$("#province option:selected").text();
		var city=$("#city option:selected").text();
		var area=$("#area option:selected").text();
		var address = province+city+area;
		var attention = $("#attention").serializeArray();
		var joinAttention = {};
		for(var i in attention){
			joinAttention[attention[i].name] = attention[i].value;
		}
		joinAttention.joinAddress = address;
		joinAttention.getJoinInfo = joinInfo + ','+getJoinInf;
		joinAttention.manageType = manageTyp + ',' + manageType;
		var attention = JSON.stringify(joinAttention);
		/* 获取基本信息和店铺情况信息开始 */
		var baseInfo = window.localStorage.getItem('params');
		var shopSituation = window.localStorage.getItem('shopSituation');
		/* 获取基本信息和店铺情况信息结束 */
		
		/* 将所有信息封装成为json格式发送至后台 */
		var params = {};
		params.baseInfo = baseInfo;
		params.shopSituation = shopSituation;
		params.attention = attention;
		console.log(params);
		$.ajax({
	        type: 'post',
	        url: '${contextPath}/ktJoin/joinApplay',
	        data:params,   
	        dataType: 'json',
	        success: function (data) {
	        	var res = data.message;
	        	if(res == '该身份证号已注册'){
	        		layer.msg(res);
	        		 /* 清除本地存储 */
			       	 /* setTimeout(function(){
			       		 alert('111');
			       		localStorage.removeItem('params'); 
			       		localStorage.removeItem('shopSituation');
			       	 }, 30000); */
		       		 window.location.href='joinApplay';
	        		return;
	        	}else{
	        		//layer.msg(res);
	        		var warning = document.getElementById('warning1');
	        		warning.style.display = "block";
	        		setTimeout(function(){
	        			warning.style.display = "none";
	        			//window.open("about:blank","_self").close();
	        			//关闭安卓系统的手机
						document.addEventListener('WeixinJSBridgeReady', function() {
							WeixinJSBridge.call('closeWindow');
						}, false);
						//关闭ios系统的手机
						WeixinJSBridge.call('closeWindow');
	        		},4000);
		       		 /* 清除本地存储 */
		       		/* setTimeout(function(){
		       			alert('222');
			       		localStorage.removeItem('params'); 
			       		localStorage.removeItem('shopSituation');
			       	 }, 30000); */
	        		return;
	        	}
	        },
	        error: function (result) {
	        	layer.msg(result.message);
	        	return;
	        }
	    });
	}
	</script>
</body>
</html>